<%@ page language="java" contentType="text/html;charset=UTF-8"
         pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 1.引入jQuery文件 -->
    <script src="${pageContext.request.contextPath}/static/js/jquery-1.11.3.min.js"></script>
    <!-- 2.引入css文件 -->
    <link href="${pageContext.request.contextPath}/static/css/bootstrap.min.css" rel="stylesheet">
    <!-- 引入font-awesome图标库，方便使用各种图标 -->
    <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="${pageContext.request.contextPath}/static/js/bootstrap.min.js"></script>
    <!-- 引入自定义的CSS文件，用于覆盖或补充默认样式 -->
<%-- <link href="${pageContext.request.contextPath}/static/css/style.css" rel="stylesheet">--%>
<style>
    @keyframes bg
    {
        0%   {background:url('${pageContext.request.contextPath}/static/images/login2.jpg');}
        34%  {background:url('${pageContext.request.contextPath}/static/images/login3.jpg');}
        67%  {background:url('${pageContext.request.contextPath}/static/images/login4.jpg');}
        100% {background:url('${pageContext.request.contextPath}/static/images/login.jpg');}
    }

</style>
</head>

<body style="background-image:url('${pageContext.request.contextPath}/static/images/login.jpg'); background-size: cover; animation-name:bg;
        animation-duration:20s;
        /*变换时间*/
        animation-delay:2s;
        /*动画开始时间*/
        animation-iteration-count:infinite;
        /*下一周期循环播放*/
        animation-play-state:running;
        /*动画开始运行*/">
<!-- 3.用于管理员登录的from表单 start-->
<div class="panel panel-primary center-block text-center" style="width: 500px; background:rgba(255, 255, 255, 0.7);margin: 120px auto;">
    <div class="panel-heading">
        <h3 class="panel-title">健身管理系统</h3>
    </div>
    <div class="panel-body" style="width: 300px; margin: 0 auto;">
        <form action="${pageContext.request.contextPath }/adminLogin.action"
              method="post">
            <%-- 用红色粗字体显示modle对象里的msg(登录提示信息)--%>
            <div class="input-group ">
                <span style="color: red; font-weight: bold;">${msg}</span>
            </div> <br />
            <div class="input-group ">
                <span class="input-group-addon">ID&nbsp;&nbsp;&nbsp;</span>
                <input type="text" class="form-control" name="userId"
                       placeholder="ID" required>
            </div> <br />
            <div class="input-group">
                <span class="input-group-addon">密码</span>
                <input type="password" class="form-control" name="password"
                       placeholder="PASSWORD" required>
            </div> <br />
            <input type="submit" class="btn btn-primary" value="登&nbsp;录">
        </form>
    </div>
</div>
<!-- 用于管理员登录的from表单 end-->
<!-- 4. 在页面的下方导入foot.jsp -->
<jsp:include page="../foot.jsp" />

</body>
</html>

